<template>
  <el-row class="">
    <el-col :span="2"></el-col>
    <el-col :span="16">
      <el-table :data="loginRecordList" :default-sort="{ prop: 'createTime', order: 'descending' }" stripe
                style="width: 100%;margin-top: 40px">
        <el-table-column prop="userId" label="用户ID"/>
        <el-table-column prop="username" label="用户名"/>
        <el-table-column prop="remoteAddr" label="访问IP"/>
        <el-table-column prop="userAgent" label="用户代理" width="300"/>
        <el-table-column prop="createTime" label="登录时间" sortable/>
      </el-table>
      <div class="demo-pagination-block" style="margin-top: 20px">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20, 50, 100]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-col>
    <el-col :span="4"></el-col>
  </el-row>


</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import {useUserinfo} from "@/components/hooks/useUserinfo.js";
import {GetLoginRecordInfoByUserId} from '@/api/member/user.js'
import {useRouter} from "vue-router";


const router = useRouter()
const {userinfo} = useUserinfo()
const {proxy: ctx} = getCurrentInstance() // 可以把ctx当成vue2中的this


// 分页
const currentPage = ref(1)
const pageSize = ref(5)
const totalCount = ref(0)
const handleSizeChange = (size) => {
  fetchLoginRecordInfoByUserId()
  console.log(`${size} items per page`)
}
const handleCurrentChange = (page) => {
  fetchLoginRecordInfoByUserId()
  console.log(`current page: ${page}`)
}


// 用户登录信息
const loginRecordList = ref([]);
const fetchLoginRecordInfoByUserId = async () => {
  try {
    const params = {
      userId: userinfo.value.id,
      page: currentPage.value,
      size: pageSize.value,
    }
    const {code, data, msg} = await GetLoginRecordInfoByUserId(params);
    if (code === 200) {
      loginRecordList.value = data.loginRecordList;
      totalCount.value = data.totalCount;
    } else {
      ctx.$message.error(msg)
    }
  } catch (error) {
    ctx.$message.error(error)
  }
}


onMounted(() => {
  fetchLoginRecordInfoByUserId()
})
</script>

<style scoped>

</style>